﻿<html>
	<head>
		<!-- 引入图标谷歌字体 -->
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<!-- 引入materialize css -->
		<link type="text/css" rel="stylesheet" href="../../Content/css/materialize.css" media="screen,projection" />
		<!-- 设置网页适配手机 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta charset="utf-8">
		<title>检验报告</title>
	</head>
	<body>
		<div id="app">
			<div class="row">
				<div class="col s12  teal white-text">
					<h4><i class="material-icons">equalizer</i> 检验/报告</h4>
				</div>
				<div class="col s12  teal white-text">
					<p class="flow-text" v-cloak>{{report_name}}</p>
				</div>
				<div class="col s12 center-align">
					<p v-cloak>姓名：{{name}} | 性别：{{sex}} | 医师：{{doctor}} | 时间：{{date}}</p>
				</div>
				<div class="col s12">
					<table class="bordered">
						<thead>
							<tr>
								<th>项目</th>
								<th>结果</th>
								<th>参考范围</th>
								<th>单位</th>
								<th>标志</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item in report_data">
								<td v-cloak>{{item.project_name}}</td>
								<td v-cloak>{{item.project_result}}</td>
								<td v-cloak>{{item.project_range}}</td>
								<td v-cloak>{{item.project_unit}}</td>
								<td>
									<i class="material-icons red-text" v-if="item.project_flag==1">arrow_upward</i>
									<i class="material-icons purple-text" v-if="item.project_flag==-1">arrow_downward</i>
									<i class="material-icons teal-text" v-if="item.project_flag==0">check</i>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>




		<!-- 引入jQuery -->
		<script src="../../Content/js/jQuery_3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入materialize（依赖jQuery） -->
		<script src="../../Content/js/materialize.js" type="text/javascript"></script>
		<!-- 引入vue.js -->
		<script src="../../Content/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入axios.js -->
		<script src="../../Content/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('.tooltipped').tooltip({
					delay: 50
				});
			});
		</script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					name: '张全蛋',
					sex: '男',
					doctor: '张三',
					date: '2019-10-01',
					report_name: '肝功能检测，肝功能检测，肾功能检测，血脂血糖检测，风湿全套',
					report_data: [{
							project_name: '总胆红素',
							project_result: '18.00',
							project_range: '<=26',
							project_unit: 'umol/L',
							project_flag: 0
						},
						{
							project_name: '直接胆红素',
							project_result: '3.56',
							project_range: '<=4',
							project_unit: 'umol/L',
							project_flag: 1
						},
						{
							project_name: '总蛋白',
							project_result: '60.09',
							project_range: '65-85',
							project_unit: 'g/L',
							project_flag: -1
						},
						{
							project_name: '球蛋白',
							project_result: '25.39',
							project_range: '20-40',
							project_unit: 'g/L',
							project_flag: 0
						}
					]
				},
				methods: {}
			})
		</script>
	</body>
</html>
